<template>
	<div>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>用户ID</th>
					<th>用户名/姓名</th>
					<th>注册时间</th>
					<th>邮箱号</th>
					<th>状态</th>
					<th>申请时间</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in createrData" :key="index">
					<td>{{item.user_id}}</td>
					<td>{{item.nickname}}({{item.user_name}})</td>
					<td>{{item.create_time}}</td>
					<td>{{item.email}}</td>
					<td>
						<span v-show="item.status == 0" style="color: #ff6600;">
							待审核
						</span>
						<span v-show="item.status == 1" style="color: #339900;">
							已通过
						</span>
						<span v-show="item.status == 2" style="color: #ff0000;">
							未通过
						</span>
					</td>
					<td>{{item.register_time}}</td>
					<td>
						<span v-if="item.status == 0" class="m-r-10">
							<a-button type="danger" size="small" @click="AuditBtn(item)">审核</a-button>
						</span>
						<span class="m-r-10">
							<a-button type="danger" ghost size="small" @click="AuditBtn(item)">复审</a-button>
						</span>
						<a-button type="primary" size="small" @click="infoModal(item)">详情</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 审核弹窗 -->
		<div>
			<a-drawer title="提现审核" placement="right" :closable="false" width="650" :visible="visible" @close="onClose">
				<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
					<a-form-item label="审核状态">
						<a-radio-group v-model="queryParams.type" @change="onChange">
							<a-radio value="2">
								未通过
							</a-radio>
							<a-radio value="1">
								通过
							</a-radio>
						</a-radio-group>
						<!--审核未通过理由-->
						<div style="margin-top: 20px" v-show="textareas">
							<span style="color: #CC3300">未通过理由:</span>
							<textarea v-model="queryParams.fail_reason" cols="60" rows="5"></textarea>
						</div>
					</a-form-item>

					<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
						<a-button type="primary" @click="sureSubmit">确定</a-button>
						<a-button style="margin-left: 10px;" @click="onClose">取消</a-button>
					</a-form-item>
				</a-form>
			</a-drawer>
		</div>
		
		
		<!-- 账号详情 -->
		<a-drawer title="详情" placement="right" width="380" :visible="infoVisible" @close="infoVisible=false">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="审核状态">
					<a-tag v-if="infoData.status==0" color="blue">未通过</a-tag>
					<a-tag v-else-if="infoData.status==1" color="green">已通过</a-tag>
					<a-tag v-else-if="infoData.status==2" color="red">待审核</a-tag>
					<a-tag v-else color="#f50">未知状态</a-tag>
				</a-form-item>
				<a-form-item label="姓名">
					{{infoData.user_name}}({{infoData.nickname}})【{{infoData.user_id}}】
				</a-form-item>
				<a-form-item label="身份证号">
					{{infoData.id_card}}
				</a-form-item>
				<a-form-item label="手机号">
					{{infoData.phone}}
				</a-form-item>
				<a-form-item label="邮箱">
					{{infoData.email}}
				</a-form-item>
				<a-form-item label="QQ号">
					{{infoData.qq}}
				</a-form-item>
				<a-form-item label="注册时间">
					{{infoData.create_time}}
				</a-form-item>
				<a-form-item label="申请时间">
					{{infoData.register_time}}
				</a-form-item>
				<a-form-item v-if="infoData.audit_time" label="审核时间">
					{{infoData.audit_time}}
				</a-form-item>
				<a-form-item v-if="infoData.status==2" label="失败原因">
					{{infoData.fail_reason}}
				</a-form-item>
			</a-form>
		</a-drawer>
		
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="formCount.pageSize" :current="formCount.page" :total="formCount.count" @change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
	</div>
</template>

<script>
	import apiUser from '../../api/user'
	import {
		Modal
	} from 'ant-design-vue';
	export default {
		data() {
			return {
				// 审核
				textareas: false,
				visible: false,
				// 分页
				pageSizeOptions: ['20', '50', '100', '150'],
				formCount: {
					count: 10,
					page: 1,
					pageSize: 10,
				},
				// 申请者数据
				createrData: [],
				queryParams: {
					fail_reason: '',
					user_id: '',
					id: '',
					type: '',
				},
				
				infoVisible:false,
				infoData:''
			}
		},
		mounted() {
			this.createList()
		},
		methods: {
			createList() {
				apiUser.getUserCreator(this.formCount.page, this.formCount.pageSize).then((res) => {
					this.createrData = res.result.data;
					this.formCount.count = res.result.count
				})
			},
			AuditBtn(item, index) {
				this.queryParams.id = item.id;
				this.queryParams.user_id = item.user_id;
				this.visible = true;
			},
			onClose() {
				this.visible = false;
				console.log(this.visible)
			},
			// 审核是否通过
			onChange(e) {
				this.queryParams.type = e.target.value
				if (e.target.value == 2) {
					this.textareas = true;
				} else {
					this.textareas = false;
				}
			},
			// 确定审核
			sureSubmit() {
				if(this.queryParams.type == 1){
					this.queryParams.fail_reason = ''
				}
				apiUser.postMpAudit(this.queryParams).then((res) => {
					if (res.status == 1) {
						this.$message.success(res.message);
						this.visible = false;
						this.createList()
					}
				})
			},
			// 分页
			clickPage(e) {
				this.formCount.page = e;
				this.createList();
			},
			onShowSizeChange(current, pageSize) {
				this.formCount.pageSize = pageSize;
				this.formCount.page = 1;
				this.createList();
			},
			
			infoModal(item){
				console.log(item)
				
				this.infoData = item
				this.infoVisible = true
			}
		},
	}
</script>

<style>

</style>
